<template>
	<a-spin :spinning="loading">
		<a-card>
			<section slot="title">内容管理</section>
			<a-row :gutter="24">
				<a-col :span="4">
					<span class="label">昵称：</span>
					<a-input :max-length="100" allow-clear v-model="search_data.memberNickname" placeholder="请输入" />
				</a-col>
				<a-col :span="4">
					<span class="label">手机号：</span>
					<a-input :max-length="100" allow-clear v-model="search_data.mobile" placeholder="请输入" />
				</a-col>
				<a-col :span="4">
					<span class="label">内容标题：</span>
					<a-input :max-length="100" allow-clear v-model="search_data.content" placeholder="请输入" />
				</a-col>

				<a-col :span="4">
					<span class="label">发布日期：</span>
					<a-date-picker v-model:value="search_data.updateTime" format="YYYY-MM-DD" />
				</a-col>


				<a-col :span="4">
					<a-button class="ml-18" type="primary" @click="search">查询</a-button>
					<a-button class="mx-8" @click="reset">重置</a-button>
					<a-button type="primary" ghost class="ml-10 border-5" @click="exportTable">导出</a-button>
					<a-button class="ml-18" type="primary" @click="goCharts()">发布</a-button>
				</a-col>
			</a-row>
			<a-table class="mt-16 order-table" :columns="columns" :data-source="data" :scroll="scroll"
				:pagination="pagination">
				<template #status="status, data">
					{{ data.status == 1 ? '正常' : '禁用' }}
				</template>
				<template #likeCount="likeCount, data">
					{{ data.likeCount || 0 }}
				</template>
				<template #commentCount="commentCount, data">
					{{ data.commentCount || 0 }}
				</template>
				<template #action="action, data">
					<div class="flex items-center justify-between">
						<a-button @click="getEdit(data)" type="primary">
							编辑
						</a-button>
						<!-- <a-button
             style="background: 	#32CD32;" type="primary" class="ml-10 ">
              启用
            </a-button> -->
						<a-button @click="delect(data)" class="ml-10 mr-10" type="danger">
							删除
						</a-button>


					</div>
				</template>
			</a-table>
			<!-- <a-divider  /> -->
		</a-card>
		<create @upload="upload" ref="create"></create>
	</a-spin>
</template>
<script>
import create from './components/create.vue'
import moment from 'moment/moment'

import {
	contentpage
} from '@/api/index'
import {
	contentDelete
} from '@/api/baseInfo'
import {
	tableMixins
} from '@/utils/mixins'
const search_data = {
	memberNickname: '',
	mobile: '',
	content: '',
	updateTime: []
}
export default {
	mixins: [tableMixins],
	components: {
		create
	},
	data() {
		return {
			search_data: {
				...search_data
			},
			loading: false,
			tabs: 'select1',
			orderId: undefined,
			ceartTime: [undefined, undefined],
			status: null,
			orderStatusEnums: [{
				value: 1,
				name: '成功'
			},
			{
				value: 2,
				name: '失败'
			}
			],
			data: [],
			columns: [{
				title: '序号',
				dataIndex: 'id',
				align: 'center',
				width: 140,
				scopedSlots: {
					customRender: 'id'
				}
			},

			{
				title: '标题',
				dataIndex: 'title',
				width: 120,
				ellipsis: true,
				align: 'center',
				scopedSlots: {
					customRender: 'title'
				}
			},
			{
				title: '昵称',
				dataIndex: 'memberNickname',
				align: 'center',
				width: 70,
				scopedSlots: {
					customRender: 'memberNickname'
				}
			},
			{
				title: '用户手机号',
				dataIndex: 'mobile',
				align: 'center',
				width: 70,
				scopedSlots: {
					customRender: 'mobile'
				}
			},


			{
				title: '点赞数量',
				dataIndex: 'likeCount',
				align: 'center',
				width: 70,
				scopedSlots: {
					customRender: 'likeCount'
				}
			},
			{
				title: '评论数量',
				dataIndex: 'commentCount',
				align: 'center',
				width: 70,
				scopedSlots: {
					customRender: 'commentCount'
				}
			},
			{
				title: '状态',
				dataIndex: 'status',
				align: 'center',
				width: 70,
				scopedSlots: {
					customRender: 'status'
				}
			},
			// { title: '发布时间', dataIndex: 'status', align: 'center', width: 70, scopedSlots: { customRender: 'status' } },

			{
				title: '操作',
				fixed: 'right',
				dataIndex: 'action',
				width: 160,
				scopedSlots: {
					customRender: 'action'
				},
				align: 'center'
			}
			]
		}
	},
	computed: {},
	watch: {},
	async created() {
		this.search()
	},
	methods: {
		search() {
			this.pageNum = 1
			this.getData()
		},
		upload() {
			this.search()
		},
		delect(data) {
			this.$confirm({
				title: '删除',
				content: `请确认是否取消该商品？`,
				okText: '确定',
				okType: 'danger',
				cancelText: '取消',
				onOk: () => {

					this.loading = true
					contentDelete({
						id: data.id
					})
						.then(res => {
							this.$message.success('删除成功！')

							this.search()

							this.loading = false
						})
						.finally(() => (this.loading = false))
				}
			})
		},
		goCharts(data) {
			this.$refs.create.open(data)
		},
		getEdit(data) {
			this.$refs.create.open(data)
		},
		getSearchParams() {
			console.log(this.vendorId)
			return {
				pageNo: this.pageNum,
				pageSize: this.rowsNum,
				...this.search_data
			}
		},
		getData() {
			this.loading = true
			contentpage(this.getSearchParams())
				.then(data => {
					this.total = data.total
					this.data = data.list
				})
				.finally(() => (this.loading = false))
		},
		reset() {
			this.search_data = {
				...search_data
			}
		}
	}
}
</script>
<style lang="less" scoped>
.ant-col {
	margin-bottom: 20px;
	display: flex;
	align-items: center;

	.label {
		flex-shrink: 0;
		width: 100px;
		text-align: right;
		font-size: 14px;
		color: #595959;
	}

	.w-full {
		flex: 1;
	}
}
</style>